<template>
  <!-- ref/children this.$refs.ref(name) 绑定到普通元素中获取到的是一个元素对象 -->
  <!-- 绑定到组件中获取到的是一个组件对象 -->
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <!-- Home.vue 里 scroll 里的所有东西都会替换到这个插槽里面 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "Scroll",
  props: {
    probeType: {
      type: Number,
      default: 0,
    },
    pullUpLoad: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      scroll: null,
    };
  },
  mounted() {
    // 1.创建BScroll对象
    // 这里获取到的就是div中有ref="wrapper"的那个标签元素对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      // 设置了这个才能鼠标拉动
      observeDOM: true,
      // 根据图片的高度动态刷新高度
      observeImage: true,
      click: true,
      // 0,1: 都是不侦测实时的位置
      // 2: 在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测.
      // 3: 只要是滚动，都侦测
      probeType: this.probeType,
      pullUpLoad: this.pullUpLoad,
    });

    // 2.监听滚动的事件 (probeType为3才行)
    if (this.probeType === 2 || this.probeType === 3) {
      this.scroll.on("scroll", (position) => {
        // console.log(position);
        // 发射自定义scroll事件 传送position参数
        this.$emit("scroll", position);
      });
    }

    // 3.监听上拉事件
    if (this.pullUpLoad) {
      this.scroll.on("pullingUp", () => {
        this.$emit("pullingUp");
      });
    }
  },
  methods: {
    /* 
    scroll自带的方法
     */
    // es6写法：不传值就默认300
    scrollTo(x, y, time = 300) {
      // scrollTo(0, 0, 300) 300ms回到顶部
      // 先判断一下(严谨) 要是this.scroll 为null 直接就不执行后面了
      this.scroll && this.scroll.scrollTo(x, y, time);
    },
    // 完成加载更多 这样才能下一次上拉加载更多
    finishPullUp() {
      this.scroll && this.scroll.finishPullUp();
    },
    // 刷新
    refresh() {
      this.scroll && this.scroll.refresh();
    },
    // 获取离开的位置
    getScrollY() {
      return this.scroll ? this.scroll.y : 0;
    },
  },
};
</script>

<style scoped>
</style>